<template>
  <a-flex
    vertical
    gap="small"
    v-for="(item, index) in expireShow"
    :key="item.id"
    :class="[
      'card-item',
      item.expireFlag === 1 ? 'card-lose' : '',
      item.status === 2 ? `card-${item.cardType}` : '',
    ]"
  >
    <div class="fill">
      <a-flex gap="small" class="f1" align="center">
        <template v-if="item.status === 1 || item.status === 2">
          <img
            class="icon"
            v-if="item.cardType === '100'"
            src="@/assets/images/card-100-1.png"
            alt=""
          />
          <img
            class="icon"
            v-else-if="item.cardType === '200'"
            src="@/assets/images/card-200-1.png"
            alt=""
          />
        </template>
        <template v-else-if="item.status === 3">
          <img
            class="icon"
            v-if="item.cardType === '100'"
            src="@/assets/images/card-100-2.png"
            alt=""
          />
          <img
            class="icon"
            v-else-if="item.cardType === '200'"
            src="@/assets/images/card-200-2.png"
            alt=""
          />
        </template>

        <span class="text">{{ getLabel(proCardType, item.cardType) }}</span>
        <a-divider type="vertical" class="line" />
        <span class="fill title">{{ item.cardName }}</span>
        <span class="use text" @click="emit('detail', item)">详情<RightOutlined /></span>
      </a-flex>
    </div>
    <a-flex gap="small" class="f2" align="center">
      <a-row class="fill" :gutter="[12, 8]" align="middle">
        <template v-if="item.cardType === '100'">
          <a-col class="label" :span="6">产品折扣</a-col>
          <a-col class="value" :span="18">{{ getProductDiscount(item) }}</a-col>
        </template>
        <a-col class="label" :span="6">使用期限</a-col>
        <a-col class="value" :span="18">{{ getValidDescDate(item) }}</a-col>
        <template v-if="item.cardType === '100'">
          <a-col class="label" :span="6">剩余金额</a-col>
          <a-col class="value" :span="18" style="display: flex">
            <a-col v-html="getResidueAmountDesc(item)"></a-col>
            <a-col style="font-size: 11px; margin-top: 3px">
              <span>(含赠金&nbsp;{{ item.remainBounsScore || 0 }})</span>
            </a-col>
          </a-col>
        </template>
        <template v-else>
          <a-col class="label" :span="6">剩余次数</a-col>
          <a-col class="value" :span="18" v-html="getResidueDesc(item)"></a-col>
        </template>
      </a-row>
      <div
        class="use btn consumption-card"
        v-if="item.expireFlag === 2 && item.status === 2"
        @click="cardConsumption(item)"
        >耗卡
      </div>
    </a-flex>
  </a-flex>

  <a-flex
    vertical
    v-show="state.showInvalid"
    gap="small"
    v-for="item in expireHidden"
    :key="item.id"
    :class="['card-item', 'card-lose', item.status === 2 ? `card-${item.cardType}` : '']"
  >
    <div class="fill">
      <a-flex gap="small" class="f1" align="center">
        <template v-if="item.status === 1 || item.status === 2">
          <img
            class="icon"
            v-if="item.cardType === '100'"
            src="@/assets/images/card-100-1.png"
            alt=""
          />
          <img
            class="icon"
            v-else-if="item.cardType === '200'"
            src="@/assets/images/card-200-1.png"
            alt=""
          />
        </template>
        <template v-else-if="item.status === 3">
          <img
            class="icon"
            v-if="item.cardType === '100'"
            src="@/assets/images/card-100-2.png"
            alt=""
          />
          <img
            class="icon"
            v-else-if="item.cardType === '200'"
            src="@/assets/images/card-200-2.png"
            alt=""
          />
        </template>

        <span class="text">{{ getLabel(proCardType, item.cardType) }}</span>
        <a-divider type="vertical" class="line" />
        <span class="fill title">{{ item.cardName }}</span>
        <span class="use text" @click="emit('detail', item)">详情<RightOutlined /></span>
      </a-flex>
    </div>
    <a-flex gap="small" class="f2" align="center">
      <a-row class="fill" :gutter="[12, 8]" align="middle">
        <template v-if="item.cardType === '100'">
          <a-col class="label" :span="6">产品折扣</a-col>
          <a-col class="value" :span="18">{{ getProductDiscount(item) }}</a-col>
        </template>
        <a-col class="label" :span="6">使用期限</a-col>
        <a-col class="value" :span="18">
          {{ getValidDescDate(item) }}
          <span v-if="getTimesCardCanPostpone(item) && item.expireFlag === 1"
            ><img src="../cashier/img/cardMoredate.png" style="width: 50px" alt=""
          /></span>
        </a-col>
        <template v-if="item.cardType === '100'">
          <a-col class="label" :span="6">剩余金额</a-col>
          <a-col class="value" :span="18" style="display: flex">
            <a-col v-html="getResidueAmountDesc(item)"></a-col>
            <a-col style="font-size: 11px; margin-top: 3px">
              <span>(含赠金&nbsp;{{ item.remainBounsScore || 0 }})</span>
            </a-col>
          </a-col>
        </template>
        <template v-else>
          <a-col class="label" :span="6">剩余次数</a-col>
          <a-col class="value" :span="18" v-html="getResidueDesc(item)"></a-col>
        </template>
      </a-row>
    </a-flex>
  </a-flex>

  <a-flex
    v-if="!expireShow?.length && (!state.showInvalid || !expireHidden?.length)"
    justify="center "
    class="justify-center w-full bg-[#F9F9F9] rounded-3px"
  >
    <a-empty description="您还未拥有有效的权益卡项" class="h-auto" imageStyle="height: 140px">
      <template #image>
        <div class="w-full test-center">
          <img :src="emptyImg" height="120px" />
        </div>
      </template>
    </a-empty>
  </a-flex>

  <div style="text-align: right; width: 100%">
    <a v-if="state.showInvalid" style="color: #999" @click="state.showInvalid = false"
      >收起已失效权益<CaretUpOutlined />
    </a>
    <a v-else style="color: #999" @click="state.showInvalid = true"
      >查看已失效权益<CaretDownOutlined />
    </a>
  </div>
</template>
<script setup>
  import { defineOptions, ref, watch, reactive } from 'vue';
  import { RightOutlined } from '@ant-design/icons-vue';

  import {
    getProductDiscount,
    getResidueAmountDesc,
    getResidueDesc,
    getValidDesc,
    getValidDescDate,
    getTimesCardCanPostpone,
  } from '@/views/member/util.js';
  import { getLabel, proCardType } from '@/api/ds.js';
  import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';

  import { useRouter } from 'vue-router';
  import emptyImg from '@/assets/images/empty.png';
  import { usePaddingOrder } from './use-padding-order';

  const router = useRouter();
  const expireHidden = ref([]);
  const expireShow = ref([]);
  const state = reactive({
    showInvalid: false,
  });
  defineOptions({ name: 'MemberCardItem' });

  const emit = defineEmits(['detail']);
  const props = defineProps({
    dataSource: {
      type: Array,
    },
  });

  watch(
    () => props.dataSource,
    (val) => {
      expireHidden.value = [];
      expireShow.value = [];
      val?.forEach((o) => {
        if (o.expireFlag === 1) {
          expireHidden.value.push(o);
        } else {
          expireShow.value.push(o);
        }
      });
    },
    { immediate: true },
  );

  const startOrder = usePaddingOrder();

  function cardConsumption(item) {
    const params = {
      memberCode: item.buyerMemberCode,
      cardNo: item.cardNo,
      cardSubType: item.cardSubType || '',
    };

    if (item.cardType === '100') {
      params.consumption = item.id;
    }

    startOrder(params);
  }
</script>

<style lang="less" scoped>
  .card-item {
    background-size: 100% 100%;
    width: calc(452px * 0.89);
    height: calc(164px * 0.89);
    background-repeat: no-repeat;
    background-position: center;

    .f1 {
      margin: 14px 16px 0 18px;
    }

    .f2 {
      margin: 0 16px 16px 18px;
    }

    .icon {
      width: 23px;
    }

    .title {
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
      font-style: normal;
    }

    .line {
      margin: 0;
    }

    .text {
      font-size: 12px;
    }

    .label,
    .value {
      font-size: 12px;
    }

    :deep(.remain) {
      font-size: 15px;
    }

    .btn {
      border-radius: 32px;
      padding: 3px 18px;

      font-weight: 500;
      font-size: 14px;
    }

    .consumption-card {
      cursor: pointer;
    }
  }

  .card-100 {
    background-image: url('@/assets/images/card-100.png');

    .title {
      color: #76491d;
    }

    .line {
      background-color: #c17084;
    }

    .text {
      color: #af6e2f;
    }

    .label,
    .value {
      color: #76491d;
    }

    :deep(.remain) {
      color: #76491d;
    }

    .btn {
      border: 1px solid #c58444;
      color: #76491d;
    }
  }

  .card-200 {
    background-image: url('@/assets/images/card-200.png');

    .title {
      color: #871531;
    }

    .line {
      background-color: #c17084;
    }

    .text {
      color: #871531;
    }

    .label,
    .value {
      color: #bb4965;
    }

    :deep(.remain) {
      color: #bb4965;
    }

    .btn {
      border: 1px solid #ee6b8b;
      color: #871531;
    }
  }

  .card-lose {
    background-image: url('@/assets/images/card-lose.png');

    .title {
      color: #999;
    }

    .line {
      background-color: #999;
    }

    .text {
      color: #999;
    }

    .label,
    .value {
      color: #999;
    }

    :deep(.remain) {
      color: #999;
    }
  }
</style>
